<template>
  <div  class="form-flex-row" style="margin :10px;">
    <div  class="show_box" v-for="(item,i) in list" :key="i" style="position: relative;">
      <i class="el-icon-error show_cha" style="" @click="del(i)"/>
      <upload-pic  :thumb="list[i]" @update:thumb="upload_edit($event,i)" :width="width" :height="height" :append="append" cate_id="3" />
    </div>
    <upload-pic :thumb="thumb" @update:thumb="upload($event)" :width="width" :height="height" :append="append" cate_id="3"/>
  </div>
</template>

<script>

export default {
  name:'UploadBanners',
  props: {
    list: {
      type: Array,
      default: []
    },
    width: {
      type: String,
      default: '150'
    },
    height: {
      type: String,
      default: '150'
    },
    max_size: {
      type: Number,
      default: 512
    },
    append: { //在多层中弹出
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      thumb:'',
    };
  },
  mounted() {

  },
  methods: {
    del(i){
      this.$msg_confirm().then((e) => {
        this.upload_edit('',i)
      });
    },
    upload_edit(url,index){
      this.$emit('update', url,index);
    },
    upload(url){
      this.thumb=''
      this.$emit('update', url,-1);

    }
  }
};
</script>

<style >
.show_cha{
  position: absolute;
  right: 4px;
  top: 13px;
  font-size: 24px;
  z-index: 10;
  color: #ff0000;
}
@media (max-width:550px) {
    .show_box{
      width:170px
    }
    .show_cha{
    position: absolute;
    right: 4px;
    top: -8px;
    font-size: 24px;
    z-index: 10;
    color: #ff0000;
  }
}
</style>>